<template>
	<!-- 中间的相框 -->
	<div class="photo_frame">
		<!-- <roundFrame></roundFrame> -->
		<slot name="default"></slot>
		<div class="left_tree">
			<img src="../../../images/left_tree_02.png" alt="">
		</div>
		<div class="right_tree">
			<img src="../../../images/right_tree_03.png" alt="">
		</div>
	</div>
</template>

<script>
	// import roundFrame from "@/components/home/roundFrame.vue"
	export default {
		components:{
			// roundFrame
		}
	}
</script>

<style lang="scss">
	@function px2vw($px) {
		@return $px * 100/750 * 1vw;
	}

	.photo_frame {
		position: relative;
	}

	// 扫描效果
	.photo::after {
		content: '';
		width: px2vw(338);
		height: px2vw(338);
		position: absolute;
		left: 0;
		top: 0;
		// line-height: px2vw(338);
		// background-color: rgba(0, 0, 0, 0.8);
		// background:linear-gradient(#243949,#517fa4);
		background: url(../../../images/scan_icon_03.png) no-repeat;
		opacity: 0.5;
	}

	.photo::after {
		animation: scan 4s infinite linear;
	}

	@keyframes scan {
		0% {
			top: 0;
		}
		50% {
			top: 170px;
		}
		100%{
			top: 0;
		}
		
	}

	.photo_frame .left_tree {
		width: px2vw(203);
		height: px2vw(315);
		position: absolute;
		left: 0;
		top: 30%;

		img {
			display: block;
			width: 100%;
		}
	}

	.photo_frame .right_tree {
		width: px2vw(182);
		height: px2vw(183);
		position: absolute;
		right: 0;
		// top: 80px;

		img {
			display: block;
			width: 100%;
		}
	}
</style>
